<!-- 表格 -->
<template>
  <div>
    <el-table
      ref="tablRef"
      :data="list"
      class="dataGrid"
      v-bind="$attrs"
      :empty-text="emptyText"
      border
      :span-method="objectSpanMethod"
      v-on="$listeners"
      @selection-change="handleSelectionChange"
      @select-all="checkAllChange"
    >

      <!-- 数据 -->
      <el-table-column
        v-for="(item) in tableOptions"
        :key="item.label"
        :label="item.label"
        v-bind="item.attrs"
        :prop="item.prop"
        show-overflow-tooltip
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
      >
        <template #default="scope">
          <slot :name="item.prop" :scope="scope">
            <span>{{ scope.row[item.prop] }}</span>
          </slot>
        </template>
      </el-table-column>

      <!--操作列  -->
      <el-table-column
        v-if="actionsOptions"
        :label="actionsOptions.label"
        :prop="actionsOptions.prop"
        :width="actionsOptions.width"
        :align="actionsOptions.align"
        v-bind="actionsOptions.attrs"
        :fixed="actionsOptions.fixed"
      >
        <template #default="scope">
          <slot name="action" :scope="scope" />
        </template>
      </el-table-column>

    </el-table>

    <!-- 显示分页 -->
    <el-pagination
      v-if="pagination.hidden"
      class="m-t-15 flex-cls-direct-right"
      :current-page="pagination.pageNum"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      :layout="paginationLayout"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          multiSelect: false
        };
      }
    },
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    // 数据列
    columns: {
      type: Array,
      required: true,
      default: () => []
    },

    // 分页
    pagination: {
      type: Object,
      default: () => {
        return {
          // 0 不显示   1 显示  2 不分页只显示数据条数
          hidden: 0,
          pageNum: 1,
          pageSizes: [50, 100, 150],
          pageSize: 50,
          total: 0,
          pageCount: 0
        };
      }
    },
    // 无数据提示
    emptyText: {
      type: String,
      default: "暂无数据"
    },
    // 需要合并的行
    colSapns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 选中的多选框里面的内容
      multipleSelection: []
    };
  },
  computed: {
    // 操作列
    actionsOptions() {
      return this.columns.find(item => item.action);
    },

    // 显示的字段  (不包含操作列 + 需要隐藏的列)
    tableOptions() {
      return this.columns.filter(item => !item.action && !item.hidden);
    },
    // 分页显示的内容
    paginationLayout() {
      if (this.pagination.hidden === 1) {
        return "total, sizes, prev, pager, next, jumper";
      }
      return "total";
    }
  },
  methods: {
    // 合并行规则
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!this.colSapns.length) {
        return;
      }

      if (this.colSapns.indexOf(columnIndex) !== -1) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },

    // 多行选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("select-change", this.multipleSelection);
    },

    // 全选；
    checkAllChange(val) {
      this.multipleSelection = val;
      this.$emit("select-change", this.multipleSelection);
    },

    // 修改分页
    handleSizeChange(size) {
      this.pagination.pageNum = 1;
      this.pagination.pageSize = size;
      this.$emit("handle-pagination-change", this.pagination);
    },

    // 分页跳转
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.$emit("handle-pagination-change", this.pagination);
    },

    // 设置表格颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // for (let i = 0; i < this.columns.length; i++) {
      //   if ((row[this.columns[i]?.fieldBg] === this.columns[i].isFieldColor ? this.columns[i]?.color : "") && columnIndex === this.columns[i]?.columnIndex) {
      //     return `background:${row?.bgColor};color:#fff;`;
      //   }
      // }
    }
  }
};
</script>

<style  lang="scss" src="./index.scss"></style>
